<template>
  <a-form @submit="handleSubmit" :form="form">
    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-show="record && record.id > 0"
      label="主键ID">
      <a-input v-decorator="['id']" disabled />
    </a-form-item>
    <a-form-item
      label="会员编号"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-input v-decorator="['memInfoId']" disabled />
    </a-form-item>
    <a-form-item
      label="消费备注"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-input v-decorator="['remark']" disabled />
    </a-form-item>
    <a-form-item
      label="应收金额"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-input v-decorator="['amountReceivable', {rules:[{required: true, message: '请输入应收金额'}]}]" />
    </a-form-item>
    <a-form-item
      label="实收金额"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-input v-decorator="['actualAmount', {rules:[{required: true, message: '请输入实收金额'}]}]" />
    </a-form-item>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'
// import memInfoApi from '@/api/memInfo'

const fields = ['id', 'memInfoId', 'remark', 'amountReceivable', 'actualAmount']

export default {
  name: 'ConsumeOrderForm',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    this.record && this.form.setFieldsValue(pick(this.record, fields))
  },
  methods: {
    onOk () {
      console.log('监听了 modal ok 事件')
      this.visible = false
      this.$emit('ok', this.form.getFieldsValue())
      // return null
    },
    onCancel () {
      console.log('监听了 modal cancel 事件')
      return new Promise(resolve => {
        resolve(true)
      })
    },
    handleSubmit () {
      console.log(123)
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
